<template>
    <div class="input-group">
      <label v-if="label">{{ label }}</label>
      <input 
        :id = 'id'
        :type="type"
        :value="modelValue"
        :placeholder="placeholder"
        :required="required"
        :class="['modern-input', { 'input-error': error }]"
        @input="$emit('update:modelValue', $event.target.value)"
        @blur="$emit('blur')"
      >
      <div v-if="error" class="error-msg">
        {{ errorMessage }}
      </div>
    </div>
  </template>
  
  <script setup>




  defineProps({
    modelValue: [String, Number],
    id: String,
    type: {
      type: String,
      default: 'text'
    },
    placeholder: String,
    label: String,
    required: Boolean,
    error: Boolean,
    errorMessage: String
    
  });
  
  defineEmits(['update:modelValue', 'blur']);
  </script>
  
  <style scoped>
  .input-group {
    margin-bottom: 1.5rem;
    position: relative;
  }
  
  .input-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 0.875rem;
    font-weight: 500;
  }
  
  .modern-input {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9375rem;
    transition: all 0.2s;
  }
  
  .modern-input:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    outline: none;
  }
  
  .input-error {
    border-color: #ff4d4f;
  }
  
  .error-msg {
    color: #ff4d4f;
    font-size: 0.75rem;
    position: absolute;
    bottom: -1.25rem;
    left: 0;
  }

  .input-error {
  border-color: #ff4d4f;
}
.error-msg {
  color: #ff4d4f;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
  </style>